<#assign baseURL = springMacroRequestContext.getContextPath() />
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拓深科技</title>
<#include "./css.ftl">
</head>
<body>
<div id="wrapper">

<#include "./left_nav.ftl">

    <div id="page-wrapper" class="gray-bg dashbard-1">
    <#include "./top_nav.ftl">
        <div class="row wrapper border-bottom white-bg page-heading">
            <div class="col-lg-9">
                <h2>监测点录入</h2>
                <ol class="breadcrumb">
                    <li>
                        消防动态监测系统
                    </li>
                    <li class="active">
                        监测点录入
                    </li>
                </ol>
            </div>
        </div>

        <div class="wrapper wrapper-content">
            <div class="ibox-content">
                <div class="">
                    <div >
                        <button <#if (role_type_id > 1)>disabled</#if> type="button" style="margin-bottom: 10px;" class="btn btn-outline btn-primary" data-toggle="modal" data-target="#monitorAddModal" ><i class="fa fa-plus"></i>&nbsp;&nbsp;添加监测点</button>
                    </div>
                    <div class="modal inmodal" id="monitorAddModal"  role="dialog" aria-hidden="true" >
                        <div class="modal-dialog" style="width:900px;margin:20px auto">
                            <div class="modal-content animated bounceInDown">
                                <div class="modal-header">
                                    <h4 class="modal-title">添加监测点</h4>
                                </div>
                                <div class="modal-body" style="padding: 1px 1px 1px 1px ">
                                    <form id="modelForm" class="form-horizontal">
                                        <div class="form-group" id="loction_input_div">
                                            <label class="col-lg-3 control-label">地理位置信息</label>
                                            <div class="col-lg-3">
                                                <select id="areaInsert" class="select2  form-control sensor_level_1" tabindex="-1" aria-hidden="true" style="width: 100%"></select>
                                            </div>
                                            <div class="col-lg-3">
                                                <select id="buildingInsert" class="select2  form-control sensor_level_2" tabindex="-1" aria-hidden="true" style="width: 100%"></select>
                                            </div>
                                            <div class="col-lg-3">
                                                <select id="floorInsert" class="select2  form-control sensor_level_3" tabindex="-1" aria-hidden="true" style="width: 98%; "></select>
                                            </div>
                                        </div>
                                        <div class="form-group" id="dtDeviceMointorInsert">
                                            <label class="col-lg-3 control-label">动态监测主机</label>
                                            <div class="col-lg-3"><select id="dtDevice"  class="select2_class_2 form-control dtDevice" tabindex="-1" aria-hidden="true" style="width: 100%"></select></div>
                                            <label class="col-lg-3 control-label">监测点名称</label>
                                            <div class="col-lg-3"><input id="monitorNameInsert"  class="form-control" name="monitorName" style="width: 98%;"></div>
                                        </div>
                                        <div class="form-group " >
                                            <label class="col-lg-3 control-label">监测点编码</label>
                                            <div class="col-lg-3"><input id="markID"  class="form-control" name="markID"  ></div>
                                            <label class="col-lg-3 control-label">报警临界值</label>
                                            <div class="col-lg-3"><input id="alartHigh"  class="form-control" name="alertHigh"  style="width: 98%;"></div>
                                        </div>
                                        <div id="iPictureInsert" data-interaction="hover">
                                            <div class="ip_slide">
                                                <img id="dtMapImg" src="assets/img/error.jpg" alt="加载地图失败" width="100%" onclick="mapOnClick(event)" />
                                                <div id="pos" class="ip_tooltip ip_img32" style="top: 10px; left: 10px;"  data-round="roundBgR">
                                                </div>
                                            </div>
                                        </div>
                                        <input id="posXInsert" type="text" style="display: none">
                                        <input id="posYInsert" type="text" style="display: none">
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button id="monitorInsertCANCEL" type="button" class="btn btn-white" data-dismiss="modal"><i class="fa fa-mail-reply"></i>&nbsp;&nbsp;取消</button>
                                    <button id="insertMonitorSave" type="button" class="btn btn-primary"><i class="fa fa-check"></i>&nbsp;&nbsp;保存</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <table class="table table-striped table-bordered table-hover " id="monitorTable" cellspacing="0" width="100%">
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>地理位置</th>
                            <th>动态监测主机</th>
                            <th>名称</th>
                            <th>监测点编码</th>
                            <th>报警临界值</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="modal inmodal" id="updateModal" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog" style="width:900px;margin:20px auto">
                <div class="modal-content animated bounceInDown">
                    <div class="modal-header">
                        <h4 class="modal-title">修改监测点</h4>
                    </div>
                    <div class="modal-body" style="padding: 1px 1px 1px 1px ">
                        <form id="updateForm" class="form-horizontal">
                            <div class="form-group" id="loction_update_div">
                                <label class="col-lg-3 control-label">地理位置信息</label>
                                <div class="col-lg-3">
                                    <select id="areaUpdate" class="form-control select2 sensor_level_1" tabindex="-1" aria-hidden="true" style="width: 100%"></select>
                                </div>
                                <div class="col-lg-3">
                                    <select id="buildingUpdate" class="form-control select2 sensor_level_2" tabindex="-1" aria-hidden="true" style="width: 100%"></select>
                                </div>
                                <div class="col-lg-3">
                                    <select id="floorUpdate" class="form-control select2 sensor_level_3" tabindex="-1" aria-hidden="true" style="width: 98%; "></select>
                                </div>
                            </div>
                            <div class="form-group" id="dtDeviceMointorUpdate">
                                <label class="col-lg-3 control-label">动态监测主机</label>
                                <div class="col-lg-3"><select id="dtDeviceUpdate"  class="select2_class_2 form-control dtDevice" tabindex="-1" aria-hidden="true" style="width: 100%"></select></div>
                                <label class="col-lg-3 control-label">监测点名称</label>
                                <div class="col-lg-3"><input id="monitorNameUpdate"  class="form-control" name="monitorNameUpdate" style="width: 98%;"></div>
                            </div>
                            <div class="form-group " >
                                <label class="col-lg-3 control-label">监测点编码</label>
                                <div class="col-lg-3"><input id="markIDUpdate"  class="form-control" name="markIDUpdate"  ></div>
                                <label class="col-lg-3 control-label">报警临界值</label>
                                <div class="col-lg-3"><input id="alartHighUpdate"  class="form-control" name="alartHighUpdate"  style="width: 98%;"></div>
                            </div>
                            <div id="iPictureUpdate" data-interaction="hover">
                                <div class="ip_slide">
                                    <img id="mapImgUpdate" src="assets/img/error.jpg" alt="加载地图失败" width="100%" onclick="mapOnClick2(event)" />
                                    <div id="posUpdate" class="ip_tooltip ip_img32" style="top: 10px; left: 10px;"  data-round="roundBgR">
                                    </div>
                                </div>
                            </div>
                            <input id="posXUpdate" type="text" style="display: none">
                            <input id="posYUpdate" type="text" style="display: none">
                            <input id="monitorID" style="display: none;" type="text"  class="form-control" >
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button id="updateMonitorCANCEL" type="button" class="btn btn-white" data-dismiss="modal"><i class="fa fa-mail-reply"></i>&nbsp;&nbsp;取消</button>
                        <button id="updateMonitorSave" type="button" class="btn btn-primary"><i class="fa fa-check"></i>&nbsp;&nbsp;保存</button>
                    </div>
                </div>
            </div>
        </div>

    <#include "./bottom_nav.ftl">
    </div>

</div>


<#include "./js.ftl">

<script>
    var mapData = [];
    var loctionData;
    $(function () {
        getAllLocation();
        getAllDtDevice();
    });
    function getAllLocation() {
        $.ajax({
            type: "GET",
            contentType: "application/json",
            dataType: "json",
            url: "${baseURL}/water/dt_geobuilding/getTree",
            async:false,
            success:function (data_in) {
                var jsonObj = data_in;
                mapData = [];
                var data = [];
                for(var i  in jsonObj.data){
                    var level1 = jsonObj.data;
                    var level1Obj = {
                        text:level1[i].name,
                        id:level1[i].id,
                    };
                    if(level1[i].children != null)
                    {
                        var level2 = level1[i].children;
                        var level2Arr = [];
                        for(var j in level2){
                            var level2Obj = {
                                text: level2[j].name,
                                id: level2[j].id,
                            };
                            if(level2[j].children != null)
                            {
                                var level3 = level2[j].children;
                                var level3Arr = [];
                                for(var k in level3){
                                    var level3Obj = {
                                        text: level3[k].name,
                                        id: level3[k].id,
                                    };
                                    level3Arr.push(level3Obj);
                                    var floorObj = {
                                        id: level3[k].id,
                                        picture: level3[k].picture
                                    };
                                    mapData.push(floorObj);
                                }
                                level2Obj .children = level3Arr;
                            }
                            level2Arr.push(level2Obj);
                        }
                        level1Obj.children = level2Arr;
                    }
                    data.push(level1Obj);
                }
                loctionData = data;
                console.log(loctionData);
                $('#loction_input_div').cxSelect({
                    selects: ['sensor_level_1', 'sensor_level_2', 'sensor_level_3'],
                    jsonName: 'text',
                    jsonValue: 'id',
                    jsonSub: 'children',
                    data:loctionData
                });
                $('#loction_update_div').cxSelect({
                    selects: ['sensor_level_1', 'sensor_level_2', 'sensor_level_3'],
                    jsonName: 'text',
                    jsonValue: 'id',
                    jsonSub: 'children',
                    data:loctionData
                });
            }
        });
    }
    function getAllDtDevice() {
        $.ajax({
            url: "${baseURL}/water/dt_device/getAll",
            dataType: 'json',
            type: "GET",
            success:function(data){
                var eqData = data.data;
                var localdatas = new Array();
                for(var i in eqData)
                {
                    var datas = {
                        name:eqData[i].name,
                        ID:eqData[i].id+":"+eqData[i].ip
                    }
                    localdatas.push(datas);
                }
                $('#dtDeviceMointorInsert').cxSelect({
                    selects: ['dtDevice'],
                    jsonName: 'name',
                    jsonValue: 'ID',
                    data:localdatas
                });
                $('#dtDeviceMointorUpdate').cxSelect({
                    selects: ['dtDevice'],
                    jsonName: 'name',
                    jsonValue: 'ID',
                    data:localdatas
                });
            }
        });
    }
    $('#floorInsert').change(function () {
        var ID = $('#floorInsert').val();
        $("#dtMapImg").attr("src", "${baseURL}/water/file/dt_geobuilding/getMap?id=" + ID);
    })

    $('#dtDeviceMointorInsert').change(function () {
        console.log($("#dtDevice").val());
    })
    var monitorTable = $('#monitorTable').DataTable({
        language: {
            "sProcessing": "处理中...",
            "sLengthMenu": "显示 _MENU_ 项结果",
            "sZeroRecords": "没有匹配结果",
            "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
            "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
            "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
            "sInfoPostFix": "",
            "sSearch": "搜索:",
            "sUrl": "",
            "sEmptyTable": "表中数据为空",
            "sLoadingRecords": "载入中...",
            "sInfoThousands": ",",
            "oPaginate": {
                "sFirst": "首页",
                "sPrevious": "上页",
                "sNext": "下页",
                "sLast": "末页"
            },
            "oAria": {
                "sSortAscending": ": 以升序排列此列",
                "sSortDescending": ": 以降序排列此列"
            }
        },
        ajax: "${baseURL}/water/dt_monitor/getAll",
        columns:[
            {"data":"id"},
            {"data":"geo"},
            {"data":"dt_device_name"},
            {"data":"monitor_name"},
            {"data":"markID"},
            {"data":"alarm_value"},
            {"data":null,"render":function(data,type,row,mete){
                var obj = encodeURIComponent(JSON.stringify(row));
                return '<div class="col-md-12" style="padding: 0 0 0 0;">' +
                        '<div class="col-md-4" style="padding: 0 2px 0 0;"><button <#if (role_type_id > 2)>disabled</#if> data-toggle="modal" data-target="#updateModal" onclick='+"editBtn("+'"'+obj+'"'+")"+ ' type="button" class="btn btn-block btn-success" style="padding: 0 0 0 0;"><i class="fa fa-pencil-square-o"></i>&nbsp;&nbsp;编&nbsp;辑</button></div>' +
                        '<div class="col-md-4" style="padding: 0 2px 0 0;"><button <#if (role_type_id > 1)>disabled</#if> onclick="deleteChannelBtn('+row.id+')" type="button" class="btn btn-block btn-danger" style="padding: 0 0 0 0"><i class="fa fa-trash"></i>&nbsp;&nbsp;删&nbsp;除</button></div> ' +
                        '</div>';
            },"width":"auto"}
        ],
        destroy: true,
        serverSide: false,
        ordering:false
    });
//    添加
    $("#insertMonitorSave").click(function () {
        var geo = $("#areaInsert option:selected").text()+"_"+$("#buildingInsert option:selected").text()+"_"+$("#floorInsert option:selected").text();
        var markID = $("#markID").val();
        var geo_id = parseInt($("#floorInsert").val());
        var pos_x = $("#posXInsert").val();
        var pos_y = $("#posYInsert").val();
        var monitor_name = $("#monitorNameInsert").val();
        var alarm_value = parseInt($("#alartHigh").val());
        var dt_device_id = parseInt($("#dtDevice").val().split(":",1));
        var ip = $("#dtDevice").val().split(":")[1];
        var dt_device_name = $("#dtDevice option:selected").text();
        var dataString = {
            ip:ip,
            geo:geo,
            markID:markID,
            geo_id:geo_id,
            pos_x:pos_x,
            pos_y:pos_y,
            monitor_name:monitor_name,
            alarm_value:alarm_value,
            dt_device_id:dt_device_id,
            dt_device_name:dt_device_name
        };
        $.ajax({
            type: "POST",
            contentType: "application/json",
            dataType: "json",
            url: "${baseURL}/water/dt_monitor/add",
            async: false,
            data: JSON.stringify(dataString),
            success:function(data){
                if(data.code === 0){
                    swal({
                        title: "添加成功。",
                        type: "success"
                    },function(){
                        monitorTable.ajax.reload();
                        $("#monitorInsertCANCEL").click();
                    });
                }else{
                    console.log("编码IP重复");
                    swal({
                        title: "编码IP重复",
                        type: "error"
                    });
                }
            },
            error:function(){
                console.log("请求异常");
                swal({
                    title: "请求异常。",
                    type: "error"
                })
            }
        });
    })
    function mapOnClick(e){
        e = e || window.event;
        var imgId ='#'+ $(e.target).attr('id');
        var currentWidth = $(imgId).width();
        var currentHeight = $(imgId).height();
        var offsetX = e.pageX - $(imgId).offset().left;
        var offsetY = e.pageY - $(imgId).offset().top;
        var x = offsetX / currentWidth;
        var y = offsetY / currentHeight;
        console.log("onClick");
        $("#pos").css({
            "left":($("#dtMapImg").width()) * x + "px",
            "top":($("#dtMapImg").height()) * y + "px",
        });
        $("#iPictureInsert").iPicture_base();
        $("#posXInsert").val(x);
        $("#posYInsert").val(y);
    }
//    编辑
    function editBtn(obj){
        var data = JSON.parse(decodeURIComponent(obj));
        var x = data.pos_x;
        var y = data.pos_y;
        var ID = data.geo_id;
        $("#monitorNameUpdate").val(data.monitor_name);
        $("#markIDUpdate").val(data.markID);
        $("#alartHighUpdate").val(data.alarm_value);
        $("#monitorID").val(data.id);
        $("#mapImgUpdate").attr("src", "${baseURL}/water/file/dt_geobuilding/getMap?id=" + ID);
        $("#mapImgUpdate").load(function () {
            console.log("width:"+ $("#mapImgUpdate").width());
            console.log("height:"+$("#mapImgUpdate").height());
            console.log("x:"+x);
            console.log("y:"+y);
            console.log("left:"+($("#mapImgUpdate").width()) * x);
            console.log("left:"+($("#mapImgUpdate").height()) * x);
            $("#posUpdate").css({
                "left":($("#mapImgUpdate").width()) * x + "px",
                "top":($("#mapImgUpdate").height()) * y + "px",
            });
            $("#iPictureUpdate").iPicture_base();
        });
        $("#posXUpdate").val(x);
        $("#posYUpdate").val(y);

    }
    $("#updateMonitorSave").click(function(){
        var id = parseInt($("#monitorID").val());
        var geo = $("#areaUpdate option:selected").text()+"_"+$("#buildingUpdate option:selected").text()+"_"+$("#floorUpdate option:selected").text();
        var markID = $("#markIDUpdate").val();
        var geo_id = parseInt($("#floorUpdate").val());
        var pos_x = $("#posXUpdate").val();
        var pos_y = $("#posYUpdate").val();
        var monitor_name = $("#monitorNameUpdate").val();
        var alarm_value = parseInt($("#alartHighUpdate").val());
        var dt_device_id = parseInt($("#dtDeviceUpdate").val().split(":",1));
        var ip = $("#dtDeviceUpdate").val().split(":")[1];
        var dt_device_name = $("#dtDevice option:selected").text();
        var dataString = {
            id:id,
            ip:ip,
            geo:geo,
            markID:markID,
            geo_id:geo_id,
            pos_x:pos_x,
            pos_y:pos_y,
            monitor_name:monitor_name,
            alarm_value:alarm_value,
            dt_device_id:dt_device_id,
            dt_device_name:dt_device_name
        };
        $.ajax({
            type: "POST",
            contentType: "application/json",
            dataType: "json",
            url: "${baseURL}/water/dt_monitor/update",
            async: false,
            data: JSON.stringify(dataString),
            success:function(data){
                if(data.code === 0){
                    swal({
                        title: "修改成功。",
                        type: "success"
                    },function(){
                        monitorTable.ajax.reload();
                        $("#updateMonitorCANCEL").click();
                    });
                }else{
                    console.log("编码IP重复");
                    swal({
                        title: "编码IP重复",
                        type: "error"
                    });
                }
            },
            error:function(){
                console.log("请求异常");
                swal({
                    title: "请求异常。",
                    type: "error"
                })
            }
        });
    });
    $('#floorUpdate').change(function () {
        var ID = $('#floorUpdate').val();
        $("#mapImgUpdate").attr("src", "${baseURL}/water/file/dt_geobuilding/getMap?id=" + ID);
    })
    function mapOnClick2(e){
        e = e || window.event;
        var imgId ='#'+ $(e.target).attr('id');
        var currentWidth = $(imgId).width();
        var currentHeight = $(imgId).height();
        var offsetX = e.pageX - $(imgId).offset().left;
        var offsetY = e.pageY - $(imgId).offset().top;
        var x = offsetX / currentWidth;
        var y = offsetY / currentHeight;
        console.log("onClick");
        $("#posUpdate").css({
            "left":($("#mapImgUpdate").width()) * x + "px",
            "top":($("#mapImgUpdate").height()) * y + "px",
        });
        $("#posXUpdate").val(x);
        $("#posYUpdate").val(y);
    }
    function option_items_select(cmb,value){
        for(var i = 0;i<cmb.options.length;i++){
            if(cmb.options[i].value == value){
                cmb.selectedIndex = i;
                return;
            }
        }
    }
//删除
    function deleteChannelBtn(id){
        $.ajax({
            type: "POST",
            contentType: "application/json",
            dataType: "json",
            url: "${baseURL}/water/dt_monitor/delete?id=" + id,
            success:function(data){
                if(data.code === 0){
                    swal({
                        title: "删除成功。",
                        type: "success"
                    });
                    monitorTable.ajax.reload();
                }
                else{
                    swal({
                        title: "操作失败。",
                        type: "error"
                    })
                }
            },
            error:function(xhr, status, error){
                swal({
                    title: "操作失败。",
                    type: "error"
                })
            }
        });
    };

</script>
</body>
</html>